<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/basicStyles.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font_z2mbq6dartp/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="empty">
            <div class="top">
                <div class="container-fluid ">
                    <a href="#">Complimentary Standard Shipping on Orders Over £75.</a>
                    <a href="#"> Buy Now Pay in 3 Instalments With Klarna</a>
                    <div class="container-login">
                        <span><input type="text" placeholder="Click Search"></span>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="visible-sm">
                    <ul class="navigation" id="navigation">
                        <a href="#" id="navigation-shop-button" data-index="0">
                            <li>SHOP</li>
                        </a>
                        <a href="#" id="navigation-explorer-button" data-index="1">
                            <li>EXPLORER</li>
                        </a>
                        <a href="#" id="navigation-stores-button" data-index="2">
                            <li>STORES</li>
                        </a>
                        <span class="logo"><a href="#" data-index="3"><img src="./img/logo.png" alt=""></a></span>
                        <a href="#" id="navigation-search-button" data-index="4">
                            <li>SEARCH</li>
                        </a>
                        <a href="#" id="navigation-account-button" data-index="5">
                            <li>ACCOUNT</li>
                        </a>
                        <a href="#" id="navigation-bag-button" data-index="6">
                            <li>BAG</li>
                        </a>
                    </ul>
                </div>
                <div class="navigation-hidden" id="navigation-hidden">
                    <ul id="navigation-shop" class="navigation-hidden-list">
                        <li>FRAGRANCES </li>
                        <li>GIFTING </li>
                        <li>BATH & BODY </li>
                        <li>HOME FRAGRANCES </li>
                        <li>SHOP BY SCENT </li>
                        <li>COLLECTIONS </li>
                    </ul>
                    <ul id="explore" class="navigation-hidden-list">
                        <li>PENHALIGON'S PERKS </li>
                        <li>FRAGRANCE PROFILING </li>
                        <li>SHOPPING FROM HOME </li>
                        <li>ASK AN EXPERT </li>
                        <li>HERITAGE </li>
                        <li>BLOG </li>
                    </ul>
                    <ul id="navigation-store" class="navigation-hidden-list"></ul>
                    <ul id="navigation-logo" class="navigation-hidden-list"></ul>
                    <ul id="navigation-search" class="navigation-hidden-list">
                        <input type="text" placeholder="Please enter the account number">
                    </br>
                        <input type="password" placeholder="Please input a password">
                        <button>登录</button>
                        <button>注册</button>
                        <!-- <li>THE TOP SEARCHES </li>
                        <li>HALFETI </li>
                        <li>CAIRO </li>
                        <li>THE TRAGEDY OF LORD GEORGE  </li>
                        <li>THE COVETED DUCHESS ROSE </li> -->
                    </ul>
                    <ul id="navigation-account" class="navigation-hidden-list">
                        <li>PENHALIGON'S PERKS </li>
                        <li>FRAGRANCE PROFILING </li>
                        <li>SHOPPING FROM HOME </li>
                        <li>ASK AN EXPERT </li>
                        <li>HERITAGE </li>
                        <li>BLOG </li>
                    </ul>
                    <ul id="navigation-bag" class="navigation-hidden-list">
                        <li>PENHALIGON'S PERKS </li>
                        <li>FRAGRANCE PROFILING </li>
                        <li>SHOPPING FROM HOME </li>
                        <li>ASK AN EXPERT </li>
                        <li>HERITAGE </li>
                        <li>BLOG </li>
                    </ul>
                </div>
            </div>
    </header>

    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./img/banner1.jpg" alt="">
                <div class="info-slider-home">
                    <h2>The Advantage Of Sampling Racquets​</h2>
                    <div class="body">
                        <p class="text-align-center">If you’re umming and ahhing as to whether to allow Racquets in
                            100ml or 30ml across the line, simply order a complimentary sample. </p>
                        <p class="text-align-center">That way you’ll have the advantage and assurance that this
                            sparkling scent is one to love. </p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="./img/banner2.jpg" alt="">
                <div class="info-slider-home-2">
                    <h2>Introducing A New Love Match​​</h2>
                    <div class="body">
                        <p class="text-align-center">Penhaligon’s is delighted to serve up its terrific new scent in the
                            Club House – Racquets please!</p>
                        <p class="text-align-center">Lemon rebounds off woody leather in 100ml and 30ml. I say, Racquets
                            has been restrung!​ </p>
                    </div>
                </div>
            </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="./javaScript/swiper.min.js.下载"></script>
    <script src="./javaScript/TweenMax.min.js.下载"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            autoplay: true,
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
    <!-- 商品轮播 -->
    <div class="container">
        <div class="row-spance">
            <h2>Best Sellers</h2>
        </div>
        <div class="shop-list">

            <div class="shop">
                <span><img src="./img/shop1.jpg" alt=""></span>
                <div class="text">
                    <a href="#">
                        <p class="productlist-title">EMPRESSA</p>
                    </a>
                    <p class="product-description"> Radiant with peach, vanilla and blood orange, the Empressa’s scent
                        bewitches.
                    </p>
                    <p class="specifications">£178 100 ml</p>
                </div>
            </div>
            <div class="shop">
                <span><img src="./img/shop2.jpg" alt=""></span>
                <div class="text">
                    <a href="#">
                        <p class="productlist-title">Cairo</p>
                    </a>
                    <p class="product-description"> Damascena rose, patchouli and saffron perfume this ancient, sensual
                        city.
                    </p>
                    <p class="specifications">£178 100 ml</p>
                </div>
            </div>
            <div class="shop">
                <span><img src="./img/shop3.jpg" alt=""></span>
                <div class="text">
                    <a href="#">
                        <p class="productlist-title">The Favourite</p>
                    </a>
                    <p class="product-description"> Mischief-tinged musk: this fragrance wields its own royally charming
                        power.
                    </p>
                    <p class="specifications">£144 100 ml</p>
                </div>
            </div>
            <div class="shop">
                <span><img src="./img/shop4.jpg" alt=""></span>
                <div class="text">
                    <a href="#">
                        <p class="productlist-title small-title">The Tragedy of Lord George</p>
                    </a>
                    <p class="product-description"> Rich, noble, deceptive. Like our patriarch, this woody perfume has
                        secrets.
                    </p>
                    <p class="specifications">£204 75 ml</p>
                </div>
            </div>
            <div class="shop">
                <span><img src="./img/shop5.jpg" alt=""></span>
                <div class="text">
                    <a href="#">
                        <p class="productlist-title">LUNA</p>
                    </a>
                    <p class="product-description"> The Moon Goddess’ bath is perfumed with orange, jasmine and fir.
                        Surrender.
                    </p>
                    <p class="specifications">£144 100 ml</p>
                </div>
            </div>
            <div class="shop">
                <span><img src="./img/shop6.jpg" alt=""></span>
                <div class="text">
                    <a href="#">
                        <p class="productlist-title">QUERCUS</p>
                    </a>
                    <p class="product-description"> Fresh zest and wet moss. A cologne – or a sunny day in the shade of
                        an oak tree?
                    </p>
                    <p class="specifications">£110 100 ml</p>
                </div>
            </div>
        </div>

    </div>
    <!-- 页面内容 -->
    <div class="home-page">
        <div class="container">
            <div class="row-space">
                <div class="introduce-list">
                    <div class="introduce">
                        <img src="./img/introduce1.jpg" alt="">
                        <a href="#" class="introduce-title">WELCOME BACK</a>
                        <p class="info-no-heading">Penhaligon’s is proud to announce the doors of most of our splendid
                            stores have reopened, and the streets are aflood with fragrance once again. </p>
                        <a href="#" class="button-base">PLAN YOUR VISIT</a>
                    </div>
                    <div class="introduce">
                        <img src="./img/introduce2.jpg" alt="">
                        <a href="#" class="introduce-title">RIFLE THROUGH THE BRITISH TALES SCENT LIBRARY​</a>
                        <p class="info-no-heading">Open up wonderful new worlds of fragrance and discover the story
                            behind many, as part of the travel-friendly scent library.</p>
                        <a href="#" class="button-base">
                            Your Collection Awaits
                        </a>
                    </div>
                    <div class="introduce">
                        <img src="./img/introduce3.jpg" alt="">
                        <a href="#" class="introduce-title">GIFTS FOR GALLIVANTERS​</a>
                        <p class="info-no-heading">A gift is all the more glorious when you can take it wherever you
                            roam so we’ve curated an array of Gift Sets featuring your new travelling companion.​</p>
                        <a href="#" class="button-base">SHOP ON</a>
                    </div>
                    <div class="introduce">
                        <img src="./img/introduce4.jpg" alt="">
                        <a href="#" class="introduce-title">AT YOUR SERVICE, NO QUIBBLES</a>
                        <p class="info-no-heading">Sometimes, all that’s needed is a helping hand. So allow Penhaligon’s
                            Aficionados to be of service. ​</p>
                        <a href="#" class="button-base">
                            ASK AN EXPERT
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 背景图 -->
    <div class="background-pic">
        <img src="./img/background.jpg" alt="">
        <div class="content-text">
            <h2 class="block-title"> News On Our Boutiques</h2>
            <p class="text-banner">Following the latest government guidelines our fragrance aficionados await your
                arrival with open arms.</p>
            <div class="button-white-banner">
                <a href="#" class="button-base button-box-white"> Follow Your Nose</a>
            </div>
        </div>
    </div>
    <!-- 页足 -->
    <footer>
        <div class="footer-container">
            <div class="footer-principal">
                <span class="footer-title">
                    <span class="footer-title-1">BE THE FIRST TO KNOW</span>
                    <span class="footer-title-2">
                        Our newsletter keeps discerning customers abreast of everything Penhaligon’s.
                    </span>
                </span>
                <div class="sign">
                    <input type="text" placeholder="sign up for our email" id="sing-inpute">
                    <button id="sign-button">SIGN UP</button>
                </div>
                <p class="footer-text">
                    One's privacy is paramount. Penhaligon's will never divulge your data to third-parties. Scout's
                    honour. For more information click here:
                    <a href="#"> Privacy Policy</a>,
                    <a href="#"> Terms Of Use</a>
                </p>

            </div>
        </div>
        <div class="footer-information">
            <div class="footer-information-main">
                <div class="footer-information-main-container">
                    <h3>SERVICES</h3>
                    <ul class="footer-information-main-ul">
                        <li><a href="#">ASK AN EXPERT</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">DELIVERY</a></li>
                        <li><a href="#">RETURNS</a></li>
                        <li><a href="#">FAQS</a></li>
                        <li><a href="#">KLARNA</a></li>
                    </ul>
                </div>
                <div class="footer-information-main-container">
                    <h3>ABOUT US</h3>
                    <ul class="footer-information-main-ul">
                        <li><a href="#">PENHALIGON'S PERKS</a></li>
                        <li><a href="#">HERITAGE</a></li>
                        <li><a href="#">STORES</a></li>
                        <li><a href="#">CAREERS</a></li>
                        <li><a href="#">GOVERNANCE</a></li>
                    </ul>
                </div>
                <div class="footer-information-main-container">
                    <h3>FRAGRANCE PROFILING</h3>
                    <ul class="footer-information-main-ul">
                        <li class="limit-long"><a href="#">To go out without perfume? Why, it’s unthinkable! Answer a
                                few questions to find your signature scent</a></li>
                        <li><a href="#">FIND YOUR PERFECT FRAGRANCE</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-empty"></div>
        <div class="footer-footer">
            <div class="footer-footer-main">
                <div class="footer-footer-main-link">
                    <a href="#">Terms & Conditions</a>
                    <a href="#"> Privacy Policy</a>
                    <a href="#"> Terms of Website Use</a>
                    <a href="#"> Cookie Policy</a>
                    <a href="#"> Returns & Refunds</a>
                </div>
                <div class="footer-footer-empty"></div>
                <div>
                    <span>© 2020 Penhaligon's Ltd</span>
                </div>
            </div>
        </div>
    </footer>
    <script>
        //正则邮箱验证
        //获取inpute标签
        var sing_inpute_ele = document.getElementById("sing-inpute");
        //获取按钮标签
        var sign_button_ele = document.getElementById("sign-button");
        //点击按钮标绑定函数
        sign_button_ele.onclick = function () {
            //邮箱的正则表达式
            var reg = /^\w{6,20}@[0-9a-z]{2,9}\.(com|cn|net)$/;
            //弹出警告框
            if (reg.test(sing_inpute_ele.value)) {
                alert("Login successful, we will send you an email later");
            } else {
                alert("Email format error, please re-enter email");
            }
        }
    </script>
    <script>
        var navigation_search_button = document.getElementById("navigation-search-button");
        var navigation_search = document.getElementById("navigation-search");
           var temp = 0 ;
           navigation_search_button.onclick = function(){
            if(temp === 0){
                navigation_search.className = "navigation-search-display";
                temp = 1 ;
            }else{
                navigation_search.style = "display:none";
                temp = 0 ;
            }
        }
    </script>
    <script>
        var navigation_hidden_list_button = document.querySelectorAll("navigation-hidden-list button");
        var 
    </script>


</body>

</html>